<template>
    <view class="content">
        <view class="main">
            <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
            <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" class="fixed_top" id="navBar"> </van-nav-bar> -->

            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <!-- 这里是页面其他内容 -->
                <!-- <view class="content-top fixed_top" :style="bgOpacity" id="content_top">
                    <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view>

                </view> -->
                <view class="main-container" ref="container"
                    :class="{ 'element_to_animate': isAnimated, 'animate_class': isAnimated, }">
                    <!-- 商品图片  五张轮播 -->
                    <view class="goodsImg" ref="goodsImg">
                        <swiper class="top_swiper" autoplay="false" :indicator-dots="false"
                            indicator-active-color="#FFFFFF" :indicator-width="20" ref="webpage"
                            :current="currentSwiper" @change="changeSwiper($event)">
                            <swiper-item v-for="(swiper_item, s) in sliderImageList" :id="s" :key="s">
                                <img :src="swiper_item" alt="">
                            </swiper-item>
                        </swiper>
                        <!-- 数字五张 -->
                        <!-- <view class="swiper_item_num">{{ currentSwiperItem + 1 }} / {{ sliderImageList.length }}</view>
                        <template v-if="params.biaozhi !== 'find'">
                            <view class="status_tips" v-if="ebStoreProduct.stock === 0">已售罄</view>
                            <view class="status_tips" v-if="!ebStoreProduct.isShow">已下架</view>
                        </template>
                        <template v-if="params.biaozhi === 'find'">
                            <view class="group_status_tips">
                                <view class="status_tips_left">
                                    <view class="joinPeopleNum">{{joinPeopleNum}}人已拼团</view>
                                    <view class="stopTimeTips">距活动结束：</view>
                                </view>
                                <view class="status_tips_right" v-if="remainingTime==='未开始' || remainingTime==='已结束'">
                                    {{remainingTime}}</view>
                                <view class="status_tips_right" v-else>
                                    <template v-if="days>0"><text>{{days}}</text> <span>天</span> </template>
                                    <template v-if="days>0"><text>{{hours}}</text> <span>时</span></template>
                                    <template v-if="hours>0"> <text>{{minutes}}</text> <span>分</span> </template>
                                    <template> <text>{{seconds}}</text> <span>秒</span> </template>
                                    </view>
                                    </view>
                        </template> -->
                    </view>
                    <!-- 服务人员信息 -->
                    <view class="serviceStaffInfo_wrapper" id="goods_content">
                        <view class="mainInfo">
                            <view class="serviceStaffInfoContent">
                                <view class="serviceStaffImg"><img :src="staffInfo.avatarUrl" alt=""></view>
                                <view class="serviceStaffText">
                                    <view class="staffName">{{staffInfo.name}} <span v-if="staffInfo.workYear && staffInfo.workYear > 0">{{staffInfo.workYear}}年工作经验</span></view>
                                    <view class="staffInfoLabel">
                                        <view class="labelItem" v-for="(item, index) in staffInfo.labels" :key="index"
                                            :class="index === 0 ? 'labelItem' : (index === 1 ? 'blueItem' : (index == 2 ? 'greenItem' : ''))">
                                            {{ item.name }}
                                        </view>
                                    </view>
                                </view>
                                <!-- <view class="serviceInfoTel"> <van-icon name="phone" siza="22" /> </view> -->
                            </view>
                        </view>
                        <view class="otherInfo">
                            <view v-if="staffInfo.age">{{zodiacAnimal}}</view>
                            <view v-if="staffInfo.age">{{staffInfo.age}}岁</view>
                            <view v-if="staffInfo.sex">{{sexText}}</view>
                            <view v-if="staffInfo.zodiac">{{zodiacText}}</view>
                            <view v-if="staffInfo.region">{{staffInfo.region}}</view>
                            <!-- <view>汉族</view> -->
                            <view v-if="staffInfo.education">{{educationText}}</view>
                        </view>
                        <!-- 服务 评价统计 -->
                        <evaluationStatistics :statistics="statistics"></evaluationStatistics>
                        <!-- 彩色的线 -->
                        <view class="clearfix">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                                alt="" style=" display:block; width: 100%; height:3px;" />
                        </view>
                        <view class="staffSkill">
                            <view class="staffSkillItem" v-for="(item,index) in staffSkill" :key="index">
                                <view class="ItemName">{{item.skillName}} </view>
                                <view class="ItemDetail" :class="{'mBottom':index!==(staffSkill.length-1)}">
                                    {{item.skillDetail}}</view>
                            </view>
                            <view class="staffSkillItem" >
                                <view class="ItemName">持有证书 </view>
                                <view class="ItemDetail" :class="{'mBottom':index!==(staffSkill.length-1)}" v-for="(item,index) in staffInfo.certifications" :key="index">
                                    {{item.name}}</view>
                            </view>
                        </view>
                        <view class="staffSkill">
                            <view class="wrapper_top">
                                <view class="wrapperTitle">关于TA</view>
                            </view>
                            <view class="staffSkillItem" v-for="(item,index) in staffSelfIntroduction" :key="index">
                                <view class="ItemName">{{item.skillName}} </view>
                                <view class="ItemDetail" :class="{'mBottom':index!==(staffSkill.length-1)}">
                                    {{item.skillDetail}}</view>
                            </view>
                        </view>
                        <view class="preBookedTime_wrapper">
                            <view class="wrapper_top">
                                <view class="wrapperTitle">可约时段</view>
                                <view class="pointBox">
                                    <view class="pointBoxItem leftPoint">
                                        <view class="dot "></view>
                                        <view class="pointText">可预约</view>
                                    </view>
                                    <view class="pointBoxItem rightPoint">
                                        <view class="dot "></view>
                                        <view class="pointText">不可预约</view>
                                    </view>
                                </view>
                            </view>
                            <view class="time-slots">
                                <view class="time-slot-header">
                                    <span>时段</span>
                                    <span v-for="(time,index) in timePoints" :key="index" :id="time">{{ time }}</span>
                                </view>
                                <view class="day" v-for="(day, index) in appointmentData" :key="index">
                                    <view class="day-label">{{ day.date }}</view>
                                    <view class="slot-container">
                                        <view class="slot"
                                            :class="{ 'available-slot': day.timeSlots[time], 'unavailable-slot': !day.timeSlots[time] }"
                                            v-for="(time, index) in timePoints" :key="index"
                                            :style="{ width: calculateSlotWidth(day.timeSlots, time), height: '20px' }">
                                        </view>
                                        <!-- <view class="slot"
                                            :class="{ 'available-slot': day.timeSlots[timePoints[0]], 'unavailable-slot': !day.timeSlots[timePoints[0]] }"
                                            :style="{ width: calculateSlotWidth(day.timeSlots, timePoints[0]) }"></view>
                                        <view class="slot"
                                            :class="{ 'available-slot': day.timeSlots[timePoints[1]], 'unavailable-slot': !day.timeSlots[timePoints[1]] }"
                                            :style="{ width: calculateSlotWidth(day.timeSlots, timePoints[1]) }"></view> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- <view class="booking-container">
                            <view class="title">
                                <text class="section-title">可约时段</text>
                                <view class="status-dot">
                                    <view :class="['dot', { 'available-dot': true }]"></view>
                                    <text>可预约</text>
                                </view>
                                <view class="status-dot">
                                    <view :class="['dot', { 'unavailable-dot': true }]"></view>
                                    <text>不可预约</text>
                                </view>
                            </view>
                            <view class="time-slot-container">
                                <view class="time-slot-header">
                                    <text>时段</text>
                                    <view v-for="slotTime in slotTimes" :key="slotTime" class="slot-time">{{ slotTime }}
                                    </view>
                                </view>
                                <view v-for="(dateItem, dateIndex) in bookingData" :key="dateIndex" class="date-slot">
                                    <text>{{ dateItem.date }}</text>
                                    <view v-for="(slot, slotIndex) in dateItem.slots" :key="slotIndex"
                                        :class="['slot', { 'available': slot.available, 'unavailable': !slot.available }]">
                                    </view>
                                </view>
                            </view>
                        </view> -->
                        <!-- 用户评价 -->
                        <view class="user-judge" id="judge_box" :class="{ 'element_to_animate': isAnimatedJudge }">
                            <view class="wrapper_top">
                                <view class="wrapperTitle">推荐理由</view>
                            </view>
                            <view class="user-judge-subtitle">
                                <view class="subtitle">客户评价</view>
                                <view class="left-arrow" @click="toJudgePage()">
                                    <text style="color: #b3b3b3; font-size: 26rpx;"> 查看全部</text> <van-icon name="arrow"
                                        style="margin-left:8px;" />
                                </view>
                            </view>
                            <!-- 评价标签 -->
                            <!-- <view class="judgeLabel_wrapper">
                                <view class="label" v-for="(item,index) in judgeLabelList" :key="index">
                                    {{item.name}} <span v-if="item.num!==0">({{item.num}})</span>
                                </view>
                            </view> -->
                            <!-- 评价列表 -->
                            <view class="judge_content" v-if="userJudgeData.length > 0">
                                <view class="userJudge_box">
                                    <scroll-view class="top-menu-view userJudge_content" scroll-x="true"
                                        :class="(swiperCurrent + 1) === userJudgeData.length ? 'last-top-menu-view' : ''"
                                        :scroll-into-view="tabCurrent" :scroll-with-animation="true">
                                        <!-- 只展示有图片的评论 -->
                                        <view class="judgeContainer" v-for="(itemS, indexS) in userJudgeData"
                                            :id="'tabNum' + (indexS + 1)" :key="indexS"
                                            @click.stop="lookInfo(indexS, $event, itemS)">
                                            <view class="user_judge_top">
                                                <view class="user_img"> <img :src="itemS.wxUserInfo.avatarUrl" alt=""> </view>
                                                <view class="user_info">
                                                    <view class="user_nicheng"> {{  itemS.wxUserInfo.nickName}} </view>
                                                    <view class="user_judge_date">{{itemS.publishTime}} </view>
                                                </view>
                                            </view>
                                            <view class="iconStar">
                                                <van-rate :value="itemS.stars" size="20" color="#FF6203" void-icon="star"
                                                    void-color="#eee" readonly/>
                                            </view>
                                            <view class="judge_comment">{{ itemS.content }}</view>
                                            <view class="judge_img" v-if="itemS.pics.length > 0">
                                                <view class="judge_img_item" v-for="(ele, val) in itemS.pics" :key="val">
                                                    <img :src="ele" alt="" mode="widthFix">
                                                </view>
                                            </view>
                                        </view>
                                    </scroll-view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import evaluationStatistics from '@/mycomponents/evaluationStatistics.vue';
import {queryEmpInfoApi,commentPageByEmpApi} from '@/api/service'


export default {
    components: {
        evaluationStatistics,
    },
    data() {
        return {
            title: '服务人员',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,
            value1: 0,
            value2: 'a',
            currentIndex: 0, // 滚动时页面顶部出现的Tab
            isTruncated: true, // 商品标题显示
            lineClamp: 2,
            staffInfo: {}, // 服务人员信息
            // staffSkill: [], // 服务人员技能
            // staffSelfIntroduction: [], // 服务人员自我简介
            statistics: {
                serviceCount: 0,
                goodRate: 0,
                replayCount: 0,
            }, // 评价统计
            sliderImageList: [
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png', 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png'
            ],
            currentBtn: -1,

            // 用户评价
            swiperCurrent: 0,
            tabCurrent: 'tabNum1',
            judgeLabelList:[
                {name:'沟通顺畅',num:2},
                {name:'工作有条理',num:2},
                {name:'责任心强',num:2},
                {name:'服务态度好',num:2},
                {name:'服务态度好',num:2},
                {name:'做事勤快',num:2},
            ],
            userJudgeDataNum: 0, // 评价总条数
            userJudgeData: [ // 热卖商品
                // {
                //     avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //     nickname: 'A***rew',
                //     createTime: '2019-08-02',
                //     valueStar:4,
                //     comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //     pics: [
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //     ]
                // },
                // {
                //     avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //     nickname: 'A***rew',
                //     createTime: '2019-08-02',
                //     valueStar:4,
                //     comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //     pics: [
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png'
              
                //         // {
                //         //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         // },
                //         // {
                //         //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //         // }
                //     ]
                // },
                // {
                //     avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                //     nickname: 'A***rew',
                //     createTime: '2019-08-02',
                //     valueStar:3,
                //     comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //     pics: [
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                //     ]
                // }
            ],


            params: {},
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            productId: undefined,
            labelList:['金牌保姆','会开车','育儿经验'],
            staffSkill:[
                {
                    skillId:1,
                    skillName:'烹饪能力',
                    skillDetail:'面食、北方菜、东北菜、西北菜、家常菜、清单菜、煲汤...',
                },
                {
                    skillId:2,
                    skillName:'烹饪能力',
                    skillDetail:'面食、北方菜、东北菜、西北菜、家常菜、清单菜、煲汤...',
                },
            ],
            staffSelfIntroduction:[
                {
                    skillId:1,
                    skillName:'自我介绍',
                    skillDetail:'从事家政行业时间有6年了，我做饭好吃，能根据雇主口味买菜做饭。爱干净且有亲和力。做事麻利，眼中有活。',
                },
                {
                    skillId:2,
                    skillName:'我的家庭',
                    skillDetail:'一家三口，和睦幸福',
                },
            ],
            timePoints: ['08', '10', '12', '14', '16', '18', '20', '22'],
            appointmentData: [
                {
                    date: '今天',
                    timeSlots: {
                        8: true,
                        10: false,
                        12: true,
                        14: false,
                        16: true,
                        18: false,
                        20: true,
                        22: false
                    }
                },
                {
                    date: '明天',
                    timeSlots: {
                        8: false,
                        10: true,
                        12: false,
                        14: true,
                        16: false,
                        18: true,
                        20: false,
                        22: true
                    }
                },
                {
                    date: '11/23',
                    timeSlots: {
                        8: true,
                        10: true,
                        12: true,
                        14: true,
                        16: false,
                        18: true,
                        20: false,
                        22: true
                    }
                }
            ],
            bookingData: [
                {
                    date: '今天',
                    slots: [
                        { time: '08', available: false },
                        { time: '10', available: true },
                        { time: '12', available: false },
                        { time: '14', available: false },
                        { time: '16', available: true },
                        { time: '18', available: true },
                        { time: '20', available: false },
                        { time: '22', available: false }
                    ]
                },
                {
                    date: '明天',
                    slots: [
                        { time: '08', available: false },
                        { time: '10', available: true },
                        { time: '12', available: false },
                        { time: '14', available: false },
                        { time: '16', available: true },
                        { time: '18', available: true },
                        { time: '20', available: false },
                        { time: '22', available: false }
                    ]
                },
                {
                    date: '11/23',
                    slots: [
                        { time: '08', available: false },
                        { time: '10', available: true },
                        { time: '12', available: true },
                        { time: '14', available: true },
                        { time: '16', available: true },
                        { time: '18', available: false },
                        { time: '20', available: false },
                        { time: '22', available: false }
                    ]
                }
            ],
            valueStar:5,
            empId:undefined,
            reservationId:undefined,
            orderType:'ALL', // ALL 全部 NEWEST 最新
            filterType:'PHOTO', // ALL 全部 PHOTO有图
            pageNum:1,
            pageSize:10,
            total:0,
            isAnimated: false,
        }
    },

    computed: {
        educationText() {
            const map = {
                HighSchool: '高中',
                College: '大专',
                Bachelor: '本科',
                Master: '硕士',
                Doctor: '博士'
            };
            return map[this.staffInfo.education] || '';
        },
        zodiacText() {
            const zodiacMap = {
                Aries: '白羊座',
                Taurus: '金牛座',
                Gemini: '双子座',
                Cancer: '巨蟹座',
                Leo: '狮子座',
                Virgo: '处女座',
                Libra: '天秤座',
                Scorpio: '天蝎座',
                Sagittarius: '射手座',
                Capricorn: '摩羯座',
                Aquarius: '水瓶座',
                Pisces: '双鱼座'
            };
            return zodiacMap[this.staffInfo.zodiac] || '';
        },
        zodiacAnimal() {
            const currentYear = new Date().getFullYear();
            const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
            // 2020年是鼠年（基准年）
            const baseYear = 2020;
            const birthYear = currentYear - (this.staffInfo.age || 0);
            const index = (birthYear - baseYear) % 12;
            return zodiacs[index >= 0 ? index : 12 + index];
        },
        sexText() {
            const map = {
                male: '男',
                female: '女'
            };
            return map[this.staffInfo.sex] || '';
        }
    },
    onLoad(options) {
        // const query = uni.createSelectorQuery().in(this)
        // setTimeout(() => {
        //     query.select('.van-goods-action').boundingClientRect(data => {
        //         console.log(data, 'data.top--00000')// 这个就是距离顶部的高度
        //         // this.detailTop = data.top // 赋值，待会要用
        //     }).exec()
        // }, 200)

        // 取到路由携带的参数
        if (options) {
            // this.params = JSON.parse(decodeURIComponent(data.params))
            // console.log(JSON.parse(decodeURIComponent(data.params)))
            // console.log('params', this.params)
            this.empId = options.id
            this.reservationId = options.reservationId

            this.queryEmpInfo()
            this.getCommentPageByEmp()
        }
    },
    onReady() {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
        // const query = uni.createSelectorQuery().in(this)
        // // 需要给评论区域设置一个id标识，在这里是demo
        // query.select('#judge_box').boundingClientRect(data => {
        //     console.log(data, data.top, 'data.top')// 这个就是距离顶部的高度
        //     this.listTop = data.top // 赋值，待会要用
        // }).exec()

        // // //需要给商品详情区域设置一个id标识，在这里是demo
        // query.select('#goodsDetail').boundingClientRect(data => {
        //     console.log(data.top, 'data.top--')// 这个就是距离顶部的高度
        //     this.detailTop = data.top // 赋值，待会要用
        // }).exec()

    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {

        handleScroll(e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
                // const query = uni.createSelectorQuery().in(this)
                // query.select('#navBar').boundingClientRect(data => {
                //     console.log(data.height, 'data.height--')// 这个就是距离顶部的高度
                //     this.tabHeight = data.height + 16 // 赋值，待会要用  navbar+手写tab的高度
                //     console.log(this.tabHeight, 'tabHeight')
                //     this.scrollMT = 'margin-top:' + (data.height + 10) + 'px'
                //     console.log(this.scrollMT, 'scrollMT')
                // }).exec()

            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 商品图片轮播图事件
        changeSwiper(e) {
            this.currentSwiperItem = e.detail.current // 指示点随着轮播图动
        },
        // 点击轮播图上指示点
        swiperDot(index) {
            // console.log(index,'index currentDot')
            this.currentSwiper = index // 轮播图随着指示点动
        },

        // 返回的箭头
        onClickLeft() {
            uni.navigateBack()
        },

        // 滑动时出现的tab
        changeTab(index, e) {
            this.currentIndex = index
            console.log(e, '090909', this.tabHeight, this.old.scrollTop, 'this.old.scrollTop')

            this.scrollTop = this.old.scrollTop

            if (index === 0) {
                this.$nextTick(function () {
                    this.isAnimated = true
                    this.isAnimatedJudge = false
                    this.isAnimatedDetail = false
                    this.scrollTop = 0
                })
            } else if (index === 1) {
                this.$nextTick(function () {
                    this.isAnimated = false
                    this.isAnimatedJudge = true
                    this.isAnimatedDetail = false
                    // this.scrollTop='579'
                    // 得出的top要减去 固定的tab的高度
                    this.scrollTop = this.listTop - this.tabHeight
                    console.log(this.scrollTop, 'ooo909090uiiu')
                })
            } else {
                this.$nextTick(function () {
                    this.isAnimated = false
                    this.isAnimatedJudge = false
                    this.isAnimatedDetail = true
                    this.scrollTop = this.detailTop - this.tabHeight
                })
            }
        },


        // 评价轮播
        lookInfo(index, e, item) {
            console.log(item, 'item')
            this.swiperCurrent = index
            // this.tabCurrent = 'tabNum' + index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
            const params = {}
            params.judgeId = item.id
            uni.navigateTo({
                url:
                    '/pages/userJudges/judgeDetail?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },


        // 查看评论
        toJudgePage() {
            const params = {
                empId:this.empId,
                source:'serviceStaffInfo',
                bizType:2, // 1=商品 2=服务
            }
            
            uni.navigateTo({
                url:
                    '/pages/userJudges/judgePage?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        getSlotClass(timeSlots, time) {
            return timeSlots[time]? 'available-slot' : 'unavailable-slot';
        },
        //calculateSlotWidth(timeSlots, time) {
          //  if (timeSlots[time]) {
          //      return '50%';
          //  } else {
          //      return '0%';
          //  }
        //},
        calculateSlotWidth(timeSlots, time) {
            const totalSlots = this.timePoints.length;
            const availableSlots = Object.values(timeSlots).filter(slot => slot).length;
            const unavailableSlots = totalSlots - availableSlots;
            if (timeSlots[time]) {
                return `${(100 / availableSlots)}%`;
            } else {
                return `${(100 / unavailableSlots)}%`;
            }
        },
        // 服务人员信息
        queryEmpInfo(){
            const params = {
                empId:this.empId,
                reservationId:this.reservationId
            }
            queryEmpInfoApi(params).then(res=>{
                console.log(res.data,'服务人员信息')
                if(res.code==200){
                    this.staffInfo = res.data
                    this.statistics.serviceCount = res.data.serviceCount || 0
                    this.statistics.goodRate = res.data.goodRate || 0
                    this.statistics.replayCount = res.data.replayCount ||0
                    this.sliderImageList = res.data.banner.split(',') ||[]
                }
            })
        },
        // 服务人员的评价信息
        getCommentPageByEmp(){
            const params = {
                empId:this.empId,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                orderType:this.orderType,
                filterType:this.filterType,
            }
            commentPageByEmpApi(params).then(res=>{
                console.log(res.data,'服务人员的评价信息')
                if(res.code==200){
                    this.userJudgeDataNum = res.data.total
                    this.userJudgeData = res.data.list.filter(item =>
                        item.attachment && item.attachment.trim() !== ''
                    )
                    this.userJudgeData.forEach(ele => {
                        ele.pics = ele.attachment.split(',')
                    });
                }
            })
        },
    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: #ffffff !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    // margin-bottom:36px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    height: calc(100vh - (30rpx + env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}


.goodsImg {
    width: 100%;
    height: 510rpx;

    .top_swiper {
        display: block;
        height: 510rpx;
    }

    img {
        width: 100%;
        height: 510rpx;
    }
}

.swiper_item_num {
    position: absolute;
    bottom: 15px;
    right: 18px;
    border-radius: 25px;
    background: rgb(0, 0, 0, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    height: 25px;
    line-height: 25px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
}

.serviceStaffInfo_wrapper {
    background: #ffffff;
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom));


    .mainInfo {
        padding: 0rpx 48rpx;
        border-bottom: 1px solid #f0f0f0;
    
        .serviceStaffInfoContent {
            padding-top: 50rpx;
            padding-bottom: 40rpx;
            display: flex;
            align-items: center;

            .serviceStaffImg {
                // width: 15%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                img {
                    // width: 100%;
                    // height: auto;
                    width: 114rpx;
                    height: 114rpx;
                    border-radius: 50%;
                }
            }

            .serviceStaffText {
                margin-left: 24rpx;

                .staffName {
                    font-weight: bolder;
                    font-size: 38rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 38rpx;
                    display: flex;
                    align-items: center;

                    span {
                        font-weight: normal;
                        font-size: 26rpx;
                        text-align: left;
                        color: #111111;
                        line-height: 26rpx;
                        padding-left: 20rpx;
                    }
                }

                .staffInfoLabel {
                    display: flex;
                    margin-top: 18rpx;

                    .labelItem {
                        border: 1px solid #FF6203;
                        background-color: rgb(255, 98, 3, 0.06);
                        color: #FF6203;
                        font-size: 22rpx;
                        line-height: 22rpx;
                        text-align: center;
                        padding: 10rpx 22rpx;
                        border-radius: 25rpx;
                        margin-right: 16rpx;
                    }

                    .blueItem {
                        border: 1px solid #0094D9;
                        background-color: rgb(0, 148, 217, 0.06);
                        color: #0094D9;
                    }

                    .greenItem {
                        border: 1px solid #00CB00;
                        background-color: rgb(0, 203, 0, 0.06);
                        color: #00CB00;
                    }

                    .labelItem:last-child {
                        margin-right: 0rpx;
                    }
                }
            }

            .serviceInfoTel {
                text-align: right;
                margin-left: 60rpx;
            }

        }
    }
    // 其他信息   属相 年龄
    .otherInfo{
        padding: 40rpx 48rpx;
        border-bottom: 1px solid #f0f0f0;
        font-size: 28rpx;
        line-height: 28rpx;
        text-align: left;
        color: #111111;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{

        }
    }

    .staffSkill{
        padding: 56rpx 48rpx;
        border-bottom: 1px solid #f0f0f0;
        .staffSkillItem{
            // margin-bottom: 75rpx;
            .ItemName{
                font-size: 38rpx;
                line-height: 38rpx;
                text-align: left;
                color: #111111;
            }
            .ItemDetail{
                margin-top: 38rpx;
                text-align: left;
                font-size:28rpx;

            }
        }
        .mBottom{
            margin-bottom: 75rpx;
        }
    }
    .preBookedTime_wrapper {
        padding: 48rpx;
        border-bottom: 1px solid #f0f0f0;


        .time-slots {
            padding: 10px;
            margin-top: 20px;
        }

        .time-slot-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .time-slot-header span {
            flex: 1;
            text-align: center;
        }

        .day {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            width: 100%;
        }

        .day-label {
            width: 40px;
            // text-align: center;
            font-size: 14px;
            // font-weight: bold;
        }

        .slot-container {
            width: calc(100% - 40px);
            // flex: 1;
            // display: flex;
            display: flex;
            align-items: center;
            background-color: #d4d4d4;
            border-radius: 5px;
            overflow: hidden;
        }

        .slot {
            height: 20px;
            border-radius: 0px;
            margin-right: 0px;
        }

        .available-slot {
            background-color: #888888;
            // border-radius: 50%;
        }

        .unavailable-slot {
            background-color: #d4d4d4;
            // border-radius: 50%;
        }
    }

    // 标题行  公用
    .wrapper_top{
        display: flex;
        align-items: center;
        margin-bottom: 48rpx;
        .wrapperTitle{
            font-weight: bolder;
            color: #FF6203;
            font-size: 38rpx;
            line-height: 38rpx;
            text-align: left;
        }
        .pointBox{
            margin-left: 48rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .dot{
                width: 34rpx;
                height: 34rpx;
                border-radius: 50%;
            }
            .pointText{
                font-size: 28rpx;
                line-height: 28rpx;
                text-align: left;
                margin-left: 12rpx;
            }
        }
        .pointBoxItem{
            display: flex;
            align-items: center;
        }
        .leftPoint{
            color: #888888;
            .dot{
                background-color: #888888;
            }
        }
        .rightPoint{
            color: #D4D4D4;
            margin-left: 56rpx;
            .dot{
                background-color: #D4D4D4;
            }
        }
    }
}


// 用户评价
.user-judge {
    padding-top:40rpx;
    padding-left: 48rpx;
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
    background: #ffffff;

    .judgeLabel_wrapper{
        display: flex;
        flex-wrap: wrap;
        margin-top: 40rpx;

        .label{
            font-size: 24rpx;
            text-align: center;
            color: #D1AC9C;
            line-height: 24rpx;
            padding: 8rpx 20rpx;
            border: 1px solid #E8C9BC;
            border-radius: 20px 20px 20px 20px;
            background: rgb(209, 172, 156, 0.1);
            margin-right: 20rpx;
            margin-bottom: 23rpx;
        }
    }

    .user-judge-subtitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 24px;

        .subtitle {
            font-weight: bolder;
            font-size: 36rpx;
            text-align: left;
            color: #111111;
            line-height: 36rpx;
        }
    }

    .judge_content {
        margin-top: 18px;

        .userJudge_box {
            position: relative;
        }

        .userJudge_content {
            position: relative;
            display: flex;

            .judgeContainer {
                // width: 248px;
                // flex: 1;
                padding: 13px 15px;
                margin-bottom: 15px;
                background: #ffffff;
                // width: 120px;
                box-shadow: 1px 1px 5px 0 rgb(231, 231, 231, 0.29);
                border: 1px solid #f0f0f0;

                // 评价人的信息 时间
                .user_judge_top {
                    display: flex;
                    // justify-content: space-between;
                    // align-items: center;
                    width: 432rpx;

                    .user_img {
                        line-height: 80rpx;
                        height: 80rpx;
                        width: 80rpx;
                        margin-right: 24rpx;

                        img {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 50%;
                        }
                    }

                    .user_info {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        line-height: 80rpx;
                        text-align: left;
                        
                        .user_nicheng {
                            font-weight: bolder;
                            font-size: 24rpx;
                            line-height: 24rpx;
                            text-align: left;
                            color: #111111;
                            // margin-left: 14rpx;
                        }

                    }

                    .user_judge_date {
                        font-size: 20rpx;
                        // text-align: left;
                        color: #b3b3b3;
                        line-height: 20rpx;
                    }
                }

                .iconStar{
                    margin: 18rpx 0rpx;
                }
                // 评价内容的文字
                .judge_comment {
                    color: #111111;
                    font-size: 24rpx;
                    text-align: left;
                    line-height: 24rpx;
                    width: 432rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    margin-bottom: 15px;
                }

                // 评价内容的三张图
                .judge_img {
                    display: flex;
                    height: 112rpx;
                    width: 432rpx;

                    .judge_img_item {
                        width: 25%;
                        margin-right: 18rpx;
                    }

                    .judge_img_item:last-child {
                        margin-right: 0rpx;
                    }

                    img {
                        width: 100%;
                        height: auto;
                    }
                }

            }
        }
    }

    // 用户评价轮播组件
    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;

        .judgeContainer {
            display: inline-block;
            margin-right: 11px;
            position: relative;
        }

        .judgeContainer:last-child {
            margin-right: 5px;
        }
    }

    .fixDiv {
        min-height: 200px;
        width: 10px;
        right: 0px;
        background: linear-gradient(270deg, #ffffff 25.52%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        z-index: 1;
    }

    .last-top-menu-view {
        width: calc(100% - 10px);
    }
}

// 商品详情图
.goodsPic {
    width: 100%;
    // line-height: 695px;
}

.goodsAction {

    #goodact {
        position: relative;
    }

    // 售罄商品提示
    .shouqingTips {
        padding-left: 48rpx;
        padding-right: 48rpx;
        position: absolute;
        top: -108rpx;
        left: 0;
        width: calc(100% - 96rpx);
        height: 108rpx;
        line-height: 108rpx;
        background: rgb(240, 240, 240, 0.6);
        // bottom: 72px;
        text-align: center;
        font-size: 28rpx;
        text-align: center;
        color: #666666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999;

    }

    // 下架商品提示
    .removeTips {
        padding-left: 48rpx;
        padding-right: 48rpx;
        position: absolute;
        top: -108rpx;
        left: 0;
        width: calc(100% - 96rpx);

        height: 108rpx;
        line-height: 108rpx;
        background: rgb(240, 240, 240, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 28rpx;
        color: #666666;
        z-index: 999;
        margin: 0 auto;
    }

}

.goods_act_box {
    position: relative;
    background-color: #ffffff;
    height: 72px;
}



.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}

::v-deep .van-goods-action--safe {
    // padding-bottom: none !important;
}

::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}

::v-deep .van-goods-action-icon {
    min-width: 70rpx !important;
}

.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}

.r12 {
    margin-right: 12px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}


// .booking-container {
//     padding: 20rpx;
// }

// .section-title {
//     color: #ff5722;
//     font-size: 32rpx;
//     font-weight: bold;
// }

// .status-dot {
//     display: flex;
//     align-items: center;
//     margin-left: 20rpx;
// }

// .dot {
//     width: 20rpx;
//     height: 20rpx;
//     border-radius: 50%;
//     margin-right: 10rpx;
// }

// .available-dot {
//     background-color: #333;
// }

// .unavailable-dot {
//     background-color: #ccc;
// }

// .time-slot-container {
//     width: 100%;
//     margin-top: 20rpx;
// }

// .time-slot-header {
//     display: flex;
//     align-items: center;
// }

// .slot-time {
//     width: calc(100% / 8);
//     text-align: center;
// }

// .date-slot {
//     display: flex;
//     align-items: center;
//     margin-top: 10rpx;
// }

// .slot {
//     width: calc(100% / 8);
//     height: 40rpx;
//     border-radius: 20rpx;
//     // margin-right: 5rpx;
// }

// .available {
//     background-color: #333;
// }

// .unavailable {
//     background-color: #ccc;
// }
</style>
